<template>
	<div id="childcount">
		<div class="count_content">
			<div class="title">
				添加账号
			</div>
			<div class="add_form">
				<div class="form_item my-flex-left">
					<div class="item_left">
						<img src="../../assets/centers/must.png" />
						<span>账号</span>
					</div>
					<div class="right_input">
						<el-input v-model="info.loginCounter" :disabled="isDisabled" :maxlength="11" placeholder="请填写手机号"></el-input>
					</div>
				</div>
				<div class="form_item my-flex-left">
					<div class="item_left">
						<img src="../../assets/centers/must.png" />
						<span>用户姓名</span>
					</div>
					<div class="right_input">
						<el-input :maxlength="20" v-model="info.name" :disabled="isDisabled" placeholder="请填写用户姓名"></el-input>
					</div>
				</div>
				<div class="form_item my-flex-left">
					<div class="item_left">
						<img src="../../assets/centers/must.png" />
						<span>用户身份证</span>
					</div>
					<div class="right_input">
						<el-input :maxlength="18" v-model="info.idNo" :disabled="isDisabled" placeholder="请填写用户身份证"></el-input>
					</div>
				</div>
				<div class="form_item my-flex-left">
					<div class="item_left">
						<img src="../../assets/centers/must.png" />
						<span>密码</span>
					</div>
					<div class="right_input">
						<el-input type="password" :maxlength="20" v-model="info.pwd" :disabled="isDisabled" placeholder="请填写密码"></el-input>
					</div>
				</div>
				<div class="form_item my-flex-left">
					<div class="item_left">
						<img src="../../assets/centers/must.png" />
						<span>确认密码</span>
					</div>
					<div class="right_input">
						<el-input type="password" :maxlength="20" v-model="info.confirmPwd" :disabled="isDisabled" placeholder="请填写确认密码"></el-input>
					</div>
				</div>

				<div class="form_item my-flex-left">
					<div class="item_left">
						<img src="../../assets/centers/must.png" />
						<span>权限</span>
					</div>
					<div class="right_input permission_label my-flex-left">
						<div class="mark_types my-flex-left" v-for="item in permissions">
							<input name="mark" type="checkbox" :value="item.id" v-model="myPermissions" />
							<span>{{item.name}}</span>
						</div>

					</div>
				</div>
				<div class="form_item my-flex-left">
					<div class="item_left">

					</div>
					<div class="right_input" @click="submit">
						<div class="infobtn my-flex-center">
							保存
						</div>
					</div>
				</div>
			</div>
			<div class="title second_title">
				账号管理
			</div>
			<div class="countlist">
				<el-table :data="tableData" border style="width: 100%">
					<el-table-column label="用户姓名">
						<template slot-scope="scope">
							<img class="headicon" v-if="scope.row.headImgUrl" :src="scope.row.headImgUrl" />
							<img class="headicon" v-else src="../../assets/touxiang.jpg" />
							<span class="cus_name">{{scope.row.customerName}}</span>
						</template>

					</el-table-column>

					<el-table-column prop="loginCounter" label="账号">
					</el-table-column>
					<el-table-column label="状态">
						<template slot-scope="scope">
							<el-switch @change="changeState(scope.$index, scope.row)" v-model="scope.row.state" active-color="#22ac38" inactive-color="#999999">
							</el-switch>
						</template>
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button type="danger" size="small" @click="editPermission(scope.$index, scope.row)">编辑权限</el-button>

						</template>
					</el-table-column>
				</el-table>
			</div>

		</div>

	</div>
</template>

<script>
	import $ from 'jquery';
	import service from '@/js/services/childAccountservice.js';
	export default {
		inject: ['reload', 'closeLoading', 'openLoading', 'hasPermission'],

		data() {
			return {
				currrentId: 9,
				test: [],
				params: {
					pageNum: 1,
					pageSize: 30
				},
				tableData: [],
				currentModelData: {

				},
				permissions: [],
				list: [],
				id: null,
				info: {
					id: null,
					customerName: null,
					loginCounter: null,
					name: null,
					permissionIds: null,
					pwd: null,
					confirmPwd: null,
					idNo: null,

				},
				myPermissions: []
			}
		},
		mounted() {
			this.childCustomerAPIGetCustomerPermissionList();
			this.childCustomerAPIPage();
		},
		computed: {
			isDisabled() {
				return !(this.id == null);
			}
		},
		methods: {
			...service,
			submit() {
				this.childCustomerAPICreateChildAccount();
			},
			editPermission(index, row) {
				this.id = row.id;
				this.childCustomerAPIDetails(this.id);
			},
			changeState(index, row) {
				this.currentModelData = row;
				this.childCustomerAPIUpdateState();
			}
		}
	}
</script>

<style lang="less" src="../../less/page/center/childcount.less"></style>